<template>
  <div class="base-title" :class="cssClass" :style="gapStyle">
    <div class="base-title__head">
      <slot name="icon">
        <BaseText
          v-if="icon"
          is-icon
          class="base-title__icon"
          :name="icon"
          :size="iconSize"
          :color="iconColor"
        />
      </slot>
      <div class="base-title__title" :class="titleClass">
        <slot>{{ title }}</slot>
      </div>
    </div>
    <div class="base-title__right">
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue";
import {
  formatGapSize,
  formatTitleSize,
  formatTextColor,
} from "@/utils/cssUtils";

const props = defineProps({
  title: String,
  size: {
    type: String,
    default: "md",
  },
  color: String,
  isBold: {
    type: Boolean,
    default: true,
  },
  maxLine: {
    type: [String, Number],
    default: 1,
  },
  gap: String,

  icon: String,
  iconSize: {
    type: String,
    default: "1em",
  },
  iconColor: String,
  iconGap: {
    type: String,
    default: "xs",
  },
  center: Boolean,
});

const titleGap = computed(() => {
  return formatGapSize(props.gap);
});

const titleSize = computed(() => {
  return formatTitleSize(props.size);
});

const titleColor = computed(() => {
  return formatTextColor(props.color);
});

const itemGap = computed(() => {
  return formatGapSize(props.iconGap);
});

const isOneLine = computed(() => {
  return +props.maxLine === 1;
});

const cssClass = computed(() => {
  let result = [];

  if (isOneLine.value) {
    result.push("base-title--one-line");
  }

  return result;
});

const titleClass = computed(() => {
  let maxLine = +props.maxLine;
  let result = [];

  if (maxLine > 0 && maxLine < 4) {
    result.push(
      isOneLine.value ? "van-ellipsis" : `van-multi-ellipsis--l${maxLine}`
    );
  }

  if (props.isBold) {
    result.push("base-title__title--bold");
  }

  if (props.center) {
    result.push("base-title__title--center");
  }

  return result;
});
</script>

<style lang="scss" scoped>
.base-title {
  display: flex;
  justify-content: space-between;
  margin-bottom: v-bind(titleGap);

  &__head {
    flex: 1 1 0;

    display: flex;
    gap: v-bind(itemGap);
    font-size: v-bind(titleSize);
    overflow-x: hidden;
    color: v-bind(titleColor);
  }
  &__icon {
    flex: none;
    :deep(.van-icon__image) {
      width: auto;
    }
  }
  &__title {
    flex: 1 1 0;
    word-break: break-all;

    &--bold {
      font-weight: bold;
    }
    &--center {
      text-align: center;
    }
  }
  &__right {
    flex: none;
  }

  &--one-line {
    align-items: center;

    .base-title__head {
      align-items: center;
    }
    .base-title__right {
      display: flex;
    }
  }
}
</style>
